<template lang="pug">
  ECharts.chart(
    :initOptions="initOptions"
    :options="currentOptions")
</template>

<script>
export default {
  props: {
    value: {
      type: String | Number,
      default: 0
    },
    column: {
      type: Object,
      default: () => ({})
    },
    init: {
      type: Object,
      default: () => ({})
    },
    options: {
      type: Object,
      default: () => ({})
    },
    formValues: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    const { chart } = this.column
    return {
      initOptions: {
        width: 255,
        height: 270,
        color: ['#03a9f4', '#67C23A', '#F56C6C', '#909399'],
        ...this.init
      },
      currentOptions: {
        tooltip: {
          formatter: '{a}: {c}'
        },
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        series: [{
          name: this.column.label,
          type: 'gauge',
          detail: {formatter: '{value}'},
          data: [{value: this.value, name: this.column.label}],
          min: chart.min,
          max: chart.max,
          axisLine: {
            lineStyle: {
              color: [
                [0.2, '#67e0e3'],
                [0.8, '#37a2da'],
                [1, '#ff9f7f']
              ],
              width: 15
            }
          }
        }],
        // detail: {
        //   backgroundColor: 'rgba(30,144,255,0.8)',
        //   borderWidth: 1,
        //   borderColor: '#fff',
        //   shadowColor: '#fff', // 默认透明
        //   shadowBlur: 5,
        //   offsetCenter: [0, '50%'], // x, y，单位px
        //   textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
        //     fontWeight: 'bolder',
        //     color: '#fff'
        //   }
        // },
        ...this.options
      }
    }
  }
}
</script>

<style lang="sass" scoped>
.chart
  margin-left: -15px
</style>
